<template>
    <view class="allDataP" >
    	<!-- <Echarts :option="option2" style="height: 300px;" @click="echartsClick"></Echarts>
		<echarts-el :option="option" style="height: 300px;"></echarts-el>
		<button @click="updateClick">切换数据</button> -->

       <!-- <ve-line :data="chartData"></ve-line> -->
	   <ve-line :data="chartData" :settings="chartSettings"></ve-line>


	   <view class="infoP" >

	   	<view class="infoP-top">
		   <view :style="{width:'5rem', textAlign:'center' }" >
		   <view class="infoP-text" >
		   本月收益
		   </view>
		   <view class="infoP-text-number" >2000.00</view>
		</view>

		<view :style="{width:'5rem', textAlign:'center' }" >
		   <view class="infoP-text" >
		   本月收益
		   </view>
		   <view class="infoP-text-number" >2000.00</view>
		</view>
		</view>
		<view :style="{ background:'#eeeeee', width:'100%', height:'0.05rem' }">
		</view>
			<view class="infoP-bottom">
		   <view :style="{width:'5rem', textAlign:'center' }"  >
		  <view class="infoP-text" >
		   本月收益
		   </view>
		   <view class="infoP-text-number" >2000.00</view>
		</view>
		
		<view :style="{width:'5rem' , textAlign:'center'}"  >
		   <view class="infoP-text" >
		   本月收益
		   </view>
		   <view class="infoP-text-number" >2000.00</view>
		</view>

		   
		</view>


	   </view>


	    <view class="infoP" >

		<view class="stati-title"  > 
			<view>设备统计</view>
			<img src="../../style/image/stati/A32.png" alt="">
		</view>

		<view class="stati-content-title" >
		<view>设备型号</view>
		<view>底座数量</view>
		<view>充电宝数</view>
		</view>
		<view class="stati-content">
				<view class="stati-content-item"  :class="{ 'bor':0<=index&&staticList.length-2}" v-for="(item,index) in staticList" :key="index"  >
				 <view>{{item.type}}</view>
				 <view>{{item.num}}</view>
				 <view>{{item.pnum}}</view>
				</view>
		</view>

	   </view>
       <!-- <h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>88888</h1> -->


    </view>
    </view>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'

import Echarts from '@/eCharts/components/echarts/echarts.vue'
import EchartsEl from '@/eCharts/components/echarts/echarts-el.vue'

 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
        components:{
        Echarts,
        EchartsEl
            }
    }
    )


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;


	  public   chartSettings = {
        // axisSite: { right: ['下单率'] },
        yAxisType: ['KMB', 'percent'],
		area: true,
        yAxisName: ['数值', '比率']
      }
      public chartData={
          columns: ['本月', '上月', '本周', '上周'],
          rows: [
            { '本月': '1/1', '上月': 1393, '本周': 1093, '上周': 0.32 },
            { '本月': '1/2', '上月': 3530, '本周': 3230, '上周': 0.26 },
            { '本月': '1/3', '上月': 2923, '本周': 2623, '上周': 0.76 },
            { '本月': '1/4', '上月': 1723, '本周': 1423, '上周': 0.49 },
            { '本月': '1/5', '上月': 3792, '本周': 3492, '上周': 0.323 },
            { '本月': '1/6', '上月': 4593, '本周': 4293, '上周': 0.78 }
          ]
             }

		staticList=[
			// {
			// 	type:'设备型号',
			// 	num:'底座数量',
			// 	pnum:'充电宝数'

			// },
			{
				type:'UC800',
				num:'1',
				pnum:'5'

			},
			{
				type:'UC800',
				num:'1',
				pnum:'5'

			},
			{
				type:'UC800',
				num:'1',
				pnum:'5'

			},{
				type:'UC800',
				num:'1',
				pnum:'5'

			}
		]

         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
          }

    }
</script>

<style  scoped>

.allDataP{
	padding: 1rem;
}
.infoP{

box-shadow: 0rem 0rem 0.5rem 0rem rgba(102, 102, 102, 0.17);
border-radius: 0.2rem;
margin-bottom: 2rem;
}

.infoP-top{
	display: flex;
	justify-content: space-around;
	padding: 1rem;
}
.infoP-bottom{
	display: flex;
	justify-content: space-around;
	padding: 1rem;
}

.infoP-text{

font-size: 0.65rem;
font-family: PingFang SC;
font-weight: 390;
color: #000000;
}

.infoP-text-number{

font-size: 0.9rem;
font-family: PingFang SC;
font-weight: 400;
color: #02AF74;
}
.stati-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
    padding: 0.5rem;
}

.stati-content-title{

	display: flex;
	margin: 0.5rem 1rem

}
.stati-content-title>view{

 width: 33.3%;
 text-align: center ;
	
font-size: 0.80rem;
font-family: PingFang SC;
font-weight: 390;
color: #666666;

}

.stati-title :nth-child(1){

font-size: 0.9rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;

}
.stati-title :nth-child(2){
width: 0.5rem;

}

.stati-content:first-child{

  background-color: red;
}

.stati-content-item{	
	/* background-color: white	; */
	display: flex;
	padding: 0.5rem 0rem;
	margin: 0.5rem 1rem;

}

.bor{
	border-bottom: 1px solid #e5e5e5;
}




.stati-content-item :first-child{
 font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 399;
color: #000000;
}

.stati-content-item >view{
   /* background-color: white	; */
	width: 33.3%;

	text-align: center;
}



</style>